<template>
  <view style="height: 500rpx">
    <uni-nav-bar left-icon="back" :border="false" statusBar @clickLeft="toBack">
      <view class="bg" @tap="changeIsopen">
        所有人可见
        <text class="iconfont icon-shezhi" style="margin-left: 10rpx; font-size: 50rpx"></text>
      </view>
    </uni-nav-bar>
    <!-- 文本域 -->
    <textarea v-model="content" placeholder="说点什么吧~" class="wenb" />

    <!-- 选中的分类 -->
    <view class="font-md px-2 py-1 flex">
      <view
        class="border px-3 py main-color main-border-color flex align-center justify-center"
        style="border-radius: 50rpx; color: #922222"
      >
        <text class="iconfont icon-caidan mr-1"></text>
        {{ arrny ? '所属分类：' + arrny[index] : '请下列选择分类' }}
      </view>
    </view>
    <!-- 选中的话题 -->
    <view class="font-md px-2 py-1 flex">
      <view
        class="border px-3 py main-color main-border-color flex align-center justify-center"
        style="border-radius: 50rpx; color: #922222; margin-bottom: 40rpx"
      >
        <text class="iconfont icon-chuangjianhuati mr-1"></text>
        {{ topic ? '所属话题：' + topic[index1] : '请选择话题' }}
      </view>
    </view>
    <!-- 图片上传 -->
    <scroll-view scroll-y>
      <uploadImage
        @change="changeImage"
        :draftImg="imageList"
        ref="uploadImage1"
        :show="imageList.length > 0"
      ></uploadImage>
    </scroll-view>
  </view>
  <!-- 底部选项卡 -->
  <view class="dibu" style="height: 120rpx; margin-top: 100rpx">
    <picker mode="selector" :range="arrny" @change="changePostClass" :value="index">
      <view
        class="iconfont icon-caidan animated bottom-btn"
        hover-class="animate__jello"
        style="font-size: 50rpx"
      ></view>
    </picker>
    <picker mode="selector" :range="topic" @change="changetopicClass" :value="index1">
      <view
        class="iconfont icon-chuangjianhuati animated bottom-btn"
        hover-class="animate__jello"
        style="font-size: 70rpx"
      ></view>
    </picker>
    <view
      class="iconfont icon-tupian animated bottom-btn"
      hover-class="animate__jello"
      @tap="iocnUploadImg('uploadImage1')"
      style="font-size: 70rpx"
    ></view>
    <view
      class="fason animated"
      hover-class="animate__jello"
      style="width: 142rpx; height: 60rpx"
      @tap="fabu"
      >发送</view
    >
  </view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { onLoad, onPageScroll, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
// 检查组件路径是否正确，若组件路径为 @/components/uniNavBar/uniNavBar.vue
// import uniNavBar from '@/components/uniNavBar/uniNavBar.vue'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import uploadImage from '@/components/upload-image/index.vue'
const { proxy } = getCurrentInstance() as any

import {
  shequAPI,
  shequListAPI,
  shequListAPI2,
  getTopicListTagAPI,
  publishArticleAPI,
} from '@/services/shequ'
import { myStore, guanzhuStore } from '@/stores'
const user = myStore()

// 控制 没有上传图片的时候 上传图片窗口隐藏
const show = () => {
  return imageList.value.length > 0
}
// onload()
onLoad(async () => {
  await uni.getStorage({
    key: 'add-input',
    success: (res) => {
      console.log(res, 'res')
      if (res.data) {
        console.log(res.data, 'dddddddddddddddddddddddd')

        content.value = res.data.content
        imageList.value = res.data.imageList
        index.value = res.data.index
        index1.value = res.data.index1
      }
      console.log(imageList.value, 'imageList1111111')
    },
  })
  console.log(content.value, 'content')
  console.log(imageList.value, 'imageList')
  // 获取分类数据
  getPostClassList()
  //获取话题数据
  getTopicListTag()
})
// 数据初始化
const imageList = ref<any>([])
const content = ref('')
//  获取选中图片  |  删除图片
const changeImage = (e) => {
  console.log(e, 'wdwdwdw')

  if (e.length > 0) {
    imageList.value = e
  } else {
    imageList.value = e
  }

  console.log(imageList.value, 'imageList666666666666')

  // submit()
}
// 按返回按钮
const toBack = () => {
  if (content.value !== '' || imageList.value.length > 0) {
    uni.showModal({
      title: '草稿',
      content: '是否保存为草稿 ',
      confirmText: '保存',
      cancelText: '不保存',
      success: (res) => {
        if (res.confirm) {
          console.log('d')
          submit()
        } else {
          // 清除缓存
          uni.removeStorage({
            key: 'add-input',
          })
        }
        uni.navigateBack({
          delta: 1,
        })
      },
    })
  } else {
    uni.navigateBack({
      delta: 1,
    })
  }
  return true
}
// 保存的函数
const submit = () => {
  //  保存到本地储存
  uni.setStorage({
    key: 'add-input',
    data: {
      content: content.value,
      imageList: imageList.value,
      index: index.value,
      index1: index1.value,
    },
  })
}

// 底部图片点击事件
const uploadImage1 = ref<any>(null)
const iocnUploadImg = (name) => {
  switch (name) {
    case 'uploadImage1':
      uploadImage1.value.chooseImage()
      break
    default:
      break
  }
}
// 选择分类数据
const post_class_index = ref(-1)
const post_class_list = ref<any>([])
const index = ref(0)
let arrny = ref<any>([])
// 获取所有文章分类
const getPostClassList = async () => {
  const res = await shequListAPI()
  post_class_list.value = res.data

  post_class_list.value.map((obj, index1) => {
    if (index1 > 0) arrny.value.push(obj.classname)
  })

  console.log(post_class_list.value, '啊啊啊')
}
// 改变分类的选项值
const changePostClass = (e) => {
  index.value = e.detail.value
}
// 获取所有话题的分类
const topic_list_tag = ref<any>([])
const index1 = ref(0)
let topic = ref<any>([])
const getTopicListTag = async () => {
  const res = await getTopicListTagAPI()
  console.log(res.data, 'dddddd')

  topic_list_tag.value = res.data
  topic_list_tag.value.map((obj, index1) => {
    topic.value.push(obj.title)
  })
}
// 改变话题分类的选项值

const changetopicClass = (e) => {
  index1.value = e.detail.value
}

// 总结发布按钮事件
const fabu = async () => {
  console.log(arrny, '1111')
  console.log(index1.value, '2222')

  let res = await publishArticleAPI({
    content: content.value,
    arrny: Number(index.value) + 1,
    topic: Number(index1.value) + 1,
    imageList: imageList.value,
    user: user.userinfo,
  })
  // 提示发布成功
  if (res.code == '1') {
    uni.showToast({
      title: '发布成功',
      icon: 'success',
    })
    // 清空发布内容
    content.value = ''
    // 清空图片列表
    imageList.value = []
    // 清空发布话题
    topic.value = []
    // 清空发布话题分类
    index1.value = 0
    index.value = 0
    // 跳转到社区tab页面
    uni.switchTab({
      url: '../../pages/category/category',
    })
  }
}
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');
.bg {
  width: 100%;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
.wenb {
  width: 100%;
  height: 300rpx;
  padding: 20rpx;
}
// 底部
.dibu {
  background-color: rgb(246, 246, 246);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0;
  bottom: 20rpx;
  left: 0;
  z-index: 1030;
}
.fason {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: auto;

  margin-right: 20rpx;
  border-radius: 8rpx;
  // 好看边框
  background-color: #ac0f8a;
  color: azure;
}
</style>
